@charset'UTF-8';
 /**
 * 黑五页
 * @Author river
 * @email lijiang@ymatou.com
 * @Date 2015/11/12
 */
 @import'../_components/variables.scss';
 @import'../_components/_mixin.scss';
 @import'../_components/reset.scss';

 @import'../_components/column.scss';

 @import'../assets/ymtUI.scss';
 @import'../assets/ymt_components.scss';

 $rem: 1rem/32;

 // $imgPath:'/images/black_five/';
 $imgPath:'http://staticontent.ymatou.com/images/black_five/';

 //满图背景
.bg__full{
    background-size:contain;
    background-repeat:no-repeat;
    background-position: center;
}

@include column('.bf-',2,$rem*9);

.img-hold{
    background-image:url(#{$imgPath}loading_cut.jpg);
}

.bf-tab{
    position:fixed;
    left:0;
    right:0;
    bottom:$rem*7;
    font-size:$rem*25;
    height:$rem*94;
    transition: transform 0.25s ease-in-out;
    will-change:transform;
    z-index:3;
    &.fixed-out{
        transform: translate(0, 100%);
        bottom:0!important;
    }
    &-wrapper{
        height:$rem*105;
        position:relative;
        background-color: #fff;
        &.show{
            .bf-tab{
                transform: translate(0, 100%);
                bottom:0!important;
            }
        }
    }

    &-bd{
        position:relative;
        width:100%;
        &>ul{
            position:relative;
            bottom:0;
            overflow:hidden;
            &:before{
                content:'';
                position:absolute;
            }
            &:before{
                width:$rem*40;
                height:$rem*30;
                left:$rem*10;
                top:$rem*5;
                 @extend .bg__full;
                background-image:url(#{$imgPath}tab-left-flag.png);
            }
            height:$rem*94;
            line-height:$rem*94;
            color:#fff;
            text-align:center;
            background: #363636;
            border-radius:$rem*94;
            box-shadow: 0 $rem*6 #6F6F6F;
        }

        li{
            float:left;
            overflow:hidden;
            //a{
                display:block;

                //padding:0 $rem*12;
                height:100%;
                width:25%;
                color:#fff;
                position:relative;
                z-index: 3;
           //}
            &:first-child{
                border-top-left-radius:$rem*94;
                border-bottom-left-radius:$rem*94;
            }
            &.active{
                background:#e7392d;
            }
        }
    }
}



.bf-night{
    width:100%;
    &-banner{
        background-image:url(#{$imgPath}night-banner4.jpg);
        height:$rem*502;
        width:100%;
        background-color:#171717;
        @extend .bg__full;
    }
    &-area{
        background-color:#d7d7d7;
    }
    &-hd{
        background-color:#e4b226;
        height:$rem*132;
        padding-top:$rem*23;
        padding:$rem*23 $rem*10 0;
        overflow:hidden;
        @include clearfix();
        &.bg{
            background-image:url(#{$imgPath}bibai_title2.jpg);
        }
        &>div{
            float:left;
        }
        .coupon{
            @include clearfix();
            color:#000;
            font-size:$rem*80;
            font-weight:bold;
            height:$rem*80;
            line-height:$rem*80;
            margin:0 $rem*10 0 $rem*6;
            letter-spacing:$rem*-6;
            i{
                font-size:$rem*28;
                display:inline;
                vertical-align: super;
                margin-right:$rem*5;
            }
            .txt{
                float:right;
                display:inline-block;
                font-size:$rem*28;
                border-left:2px solid #000;
                border-right:1px solid #000;
                text-align:center;
                line-height:1.1;
                width:$rem*44;
                margin-left:$rem*10;
                letter-spacing:0;
                vertical-align: middle;
            }
        }
        .value{
            color:#fff;
            font-size:$rem*28;
            line-height:1.3;
            h4{
                font-size:$rem*38;

            }
        }
        .receive-btn{
            font-size:$rem*33;
            color:#e4b226;
            background:#fff;
            float:right;
            border:0;
            margin-top:$rem*-8;
            font-weight:bold;
            width:$rem*88;
            height:$rem*88;
            padding:0;
            line-height:1.1;
            box-shadow:$rem*10 $rem*20 $rem*15 rgba(0,0,0,.4)
        }
    }
    &-bd{
        padding:0 $rem*9;
        .list-item{
            background:#fff;
            margin-bottom:$rem*9;
            padding-bottom:$rem*10;
        }
        .pic{
            height:$rem*360;
            background-size: contain;
              background-position: top;
        }
        .info{
            padding:0 $rem*22;
            font-size:$rem*22;
            color:#a3a3a3;
            margin-top:$rem*10;
            &>h4{
                color:#333;
                height:$rem*66;
                @include textOverFlow(2);
            }
            .original-price{
                margin:$rem*10 0;
            }
        }
        .price-wrapper{
            width:100%;
            height:$rem*60;
            line-height:$rem*60;
            border:1px solid #f2b60e;
            border-radius:$rem*60;
            box-shadow: 0 2px #a67a00;
            background-color: #f2b60e;
            margin-top:$rem*10;

            &>span{
                display:inline-block;
                height:100%;
                text-align:center;
                float:left;
            }
            &>:first-child{
                background:#fff;
                color:#f2b60e;
                border-top-left-radius: $rem*60;
                border-bottom-left-radius: $rem*60;
                width:40%;
                font-weight:bold;
            }
            &>:last-child{
                background:#f2b60e;
                color:#fff;
                border-top-right-radius: $rem*60;
                border-bottom-right-radius: $rem*60;
                width:60%;
                &>strong{
                    font-size:$rem*35;
                    font-weight:bold;
                }
            }
        }
        .national-flag{
            display:inline-block;
            width:$rem*25;
            height:$rem*25;
            background-size:contain;
            background-repeat:no-repeat;
            vertical-align: middle;
            margin-right:$rem*10;
        }
    }
}


.bf-tab{
    position:fixed;
    left:0;
    right:0;
    bottom:$rem*7;
    font-size:$rem*25;
    height:$rem*94;
    transition: transform 0.25s ease-in-out;
    will-change:transform;
    z-index:3;
    &.fixed-out{
        transform: translate(0, 100%);
        bottom:0!important;
    }
    &-wrapper{
        height:$rem*105;
        position:relative;
        background-color: #fff;
        &.show{
            .bf-tab{
                transform: translate(0, 100%);
                bottom:0!important;
            }
        }
    }

    &-bd{
        position:relative;
        width:100%;
        &>ul{
            position:relative;
            bottom:0;
            overflow:hidden;
            &:before{
                content:'';
                position:absolute;
            }
            &:before{
                width:$rem*40;
                height:$rem*30;
                left:$rem*10;
                top:$rem*5;
                 @extend .bg__full;
                background-image:url(#{$imgPath}tab-left-flag.png);
            }
            height:$rem*94;
            line-height:$rem*94;
            color:#fff;
            text-align:center;
            background: #363636;
            border-radius:$rem*94;
            box-shadow: 0 $rem*6 #6F6F6F;
        }

        li{
            float:left;
            overflow:hidden;
            //a{
                display:block;

                //padding:0 $rem*12;
                height:100%;
                width:25%;
                color:#fff;
                position:relative;
                z-index: 3;
           //}
            &:first-child{
                border-top-left-radius:$rem*94;
                border-bottom-left-radius:$rem*94;
            }
            &.active{
                background:#e7392d;
            }
        }
    }
}
